//
//  OptimizationContentView.swift
//  SwiftUIStacks
//
//  Created by 李煜 on 2024/7/31.
//

import SwiftUI

struct OptimizationContentView: View {
  var body: some View {
    VStack {
      // 顶部标题
      HeaderView()
      // 底部套餐方案
      HStack(spacing: 16) {
        // basic套餐
        OptPricingView(title: "Basic", price: "$9", textColor: .white, bgColor: .purple)
        
        // Pro套餐
        ZStack {
          OptPricingView(title: "Pro", price: "$19", textColor: .black, bgColor: Color(red: 240 / 255, green: 240 / 255, blue: 240 / 255)) {
            LabelView(title: "Best for designer", offset: CGPoint(x: 0, y: 87))
          }
        }
      }
      .padding(.horizontal)
      
      // team套餐
      ZStack {
        OptPricingView(title: "Team", price: "$299", textColor: .white, bgColor: Color(red: 62 / 255, green: 63 / 255, blue: 70 / 255), icon: "wand.and.rays") {
          LabelView(title: "Perfect for teams with 20 members", offset: CGPointMake(0, 110))
        }
        .padding()
      }
      
      Spacer()
    }
  }
}

#Preview {
  OptimizationContentView()
}

struct OptHeaderView: View {
  var body: some View {
    HStack {
      VStack(alignment: .leading, spacing: 2, content: {
        Text("Choose")
          .font(.system(.largeTitle, design: .rounded))
          .fontWeight(.black)
        
        Text("Your Plan")
          .font(.system(.largeTitle, design: .rounded))
          .fontWeight(.black)
        
      })
      // 添加弹簧
      Spacer()
    }
    //        .padding([.leading])
    .padding()
  }
}

struct OptPricingView: View {
  var title: String
  var price: String
  var textColor: Color
  var bgColor: Color
  var icon: String? //  icon
  var label: (() -> LabelView)? = nil // 把labelView提取到PricingView中 我太行了!
  //    init(title: String, price: String, textColor: Color, bgColor: Color, icon: String? = nil, label: @escaping () -> LabelView?) {
  //        self.title = title
  //        self.price = price
  //        self.textColor = textColor
  //        self.bgColor = bgColor
  //        self.icon = icon
  //        self.label = label
  //    }
  var body: some View {
    ZStack {
      VStack {
        if let icon = icon {
          Image(systemName: icon)
            .font(.largeTitle)
            .foregroundStyle(.white)
        }
        
        Text(title)
          .font(.system(.title, design: .rounded))
          .fontWeight(.black)
          .foregroundStyle(textColor)
        
        Text(price)
          .font(.system(size: 40, weight: .heavy, design: .rounded))
          .foregroundStyle(textColor)
        
        Text("per month")
          .font(.headline)
          .foregroundStyle(textColor)
      }
      .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
      .padding(40)
      .background(bgColor)
      .cornerRadius(10)
      
      if let label = label {
        label()
      }
    }
  }
}

struct OptLabelView: View {
  var title: String
  var offset: CGPoint = .zero
  var body: some View {
    Text(title)
      .font(.system(.caption, design: .rounded))
      .fontWeight(.bold)
      .foregroundStyle(.white)
      .padding(5)
      .background(Color(red: 255 / 255, green: 183 / 255, blue: 37 / 255))
      .offset(x: offset.x, y: offset.y)
  }
}
